<template>
	<!-- 如果组件输入框获取焦点，就添加focused类 
		:class="{类名：boolean值}"
		如果boolean值为true就有这个类
	-->
  <view class="search" :class="{focused: isRearch}">
    <view class="sinput">
      <input
			type="text"
			@focus="hFocus"
			v-model="keyword"
			@input="searchPrd"
			@confirm="goResult"
			confirm-type="search"
			placeholder="搜索" />
      <button @click="hCancel">取消</button>
    </view>
    <!-- 
			如果是出于搜索状态显示，下面的内容是可见的
		-->
    <view class="scontent" v-show="isRearch">
			<block v-show="list.length===0">
				<view class="title">
					搜索历史
					<span class="clear"></span>
				</view>
				<!-- 搜索历史 -->
				<view class="history">
					<navigator url="/pages/list/index">小米</navigator>
				</view>
      </block>
			<!-- 结果 -->
      <scroll-view v-show="list.length" scroll-y class="result">
        <navigator 
					v-for="item in list"
					:key="item.goods_id"
					:url="'/packageone/goods/goods?id=' + item.goods_id">{{item.goods_name}}</navigator>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
	data() {
		return {
			list: [], // 商品列表
			isRearch: false,
			keyword: '', // 搜索关键字
		}
	},
	methods: {
		// 搜索结果页
		
		goResult() {
			uni.navigateTo({
				url: '/packageone/list/list?query=' + this.keyword
			})
		},
		// 搜索关键字变化了
		searchPrd(){
			
			if(this.timerId) {
				clearTimeout(this.timerId)
			}
			
			this.timerId = setTimeout(async () => {
				
				const keyword = this.keyword
				if(keyword.trim() === ''){
					this.list = []
					return 
				}
				const res = await this.request({
					url: '/goods/search',
					data: {
						query: keyword
					}
				})
				console.log(res)
				this.list = res.data.goods
				
			}, 500)
			
		},
		hFocus() {
			console.log('得到焦点')
			// 给根元素添加focused类？
			this.isRearch = true
			// 通知父组件 - 它自己展开了
			// 隐藏tabBar
			uni.hideTabBar()
			// 设置父组件容器的高度-api拿到
			// console.log(uni.getSystemInfoSync())
			const h = uni.getSystemInfoSync().windowHeight
			this.$emit('setHeight',  h+'px')
		},
		hCancel() {
			this.isRearch = false
			// 显示tabbar
			uni.showTabBar()
			this.$emit('setHeight', 'auto')
		}
	}
}
</script>

<style lang="scss" scoped>
// 搜索
.search {
  width:750rpx;
  display: flex;
  flex-direction: column;
  .sinput {
    box-sizing: border-box;
    padding: 20rpx 16rpx;
    background: #ff2d4a;
    position: relative;
    //伪元素
    &::after {
      position: absolute;
      top: 28rpx;  
      left: 302rpx;
      content: "";
      width: 44rpx;
      height: 44rpx;
      line-height: 1;
      background-image: url(https://static.botue.com/ugo/images/icon_search%402x.png);
      background-size: 32rpx;
      background-position: 6rpx center;
      background-repeat: no-repeat;
    }
    input {
      background: #fff;
      flex: 1;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 24rpx;
      color: #bbb;
      border-radius: 5rpx;
    }
    button {
      display: none;
      margin-left: 20rpx;
      width: 150rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 24rpx;
      border-radius: 5rpx;
      background: transparent;
      color: #666;
    }
  }
  &.focused {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    .sinput {
      display: flex;
      background: #eee;
      input {
        text-align: left;
        padding-left: 60rpx;
      }
      button {
        display: block;
      }
      &::after {
        left: 30rpx;
      }
    }
  }
  .scontent {
    background: #fff;
    position: relative;

    flex: 1;
    padding: 27rpx;
    .title {
      font-size: 27rpx;
      line-height: 1;
      color: #333;
    }
    .clear {
      display: block;
      width: 27rpx;
      height: 27rpx;
      float: right;
      background-image: url(http://static.botue.com/ugo/images/clear.png);
      background-size: cover;
    }

    .history {
      padding-top: 30rpx;
      navigator {
        display: inline-block;
        line-height: 1;
        padding: 15rpx 20rpx 12rpx;
        background-color: #ddd;
        font-size: 24rpx;
        margin-right: 20rpx;
        margin-bottom: 15rpx;
        color: #333;
      }
    }

    .result {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: #fff;
      navigator {
        line-height: 1;
        padding: 20rpx 30rpx;
        font-size: 24rpx;
        color: #666;
        border-bottom: 1px solid #eee;

        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
</style>